<template>
  <div>
    <div style="overflow: hidden; height: 45px; line-height: 45px">
      <el-breadcrumb
        separator-class="el-icon-arrow-right"
        style="float: left; line-height: 45px"
      >
        <el-breadcrumb-item :to="{ path: '/admin/index' }"
          >首页</el-breadcrumb-item
        >
        <!-- <el-breadcrumb-item :to="{ path: '/admin/dashboard' }"
          >控制台</el-breadcrumb-item -->
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        type="primary"
        style="float: right; margin-right: 10px; margin-bottom: 5px"
        @click="dialogVisible = true"
        >添加</el-button
      >
      <input
        type="text"
        placeholder="搜索"
        class="search"
        @input="search"
        v-model="keywords"
      />
    </div>
    <!-- 添加信息 弹出框 -->
    <el-dialog
      title="添加用户信息"
      :visible.sync="dialogVisible"
      width="35%"
      :before-close="handleClose"
    >
      <div class="inner" style="width: 300px; margin: 0 auto">
        <div class="child">
          姓名:
          <input
            type="text"
            placeholder="用户名"
            class="inp"
            @blur="changeName"
            v-model="username"
          />
          <i
            class="el-icon-circle-check"
            v-show="uNameStatus == 1"
            style="color: green"
          ></i>
          <i
            class="el-icon-circle-close"
            v-show="uNameStatus == 2"
            style="color: red"
          ></i>
          <div
            style="color: red; font-size: 12px; margin-left: 40px"
            v-show="uNameStatus == 2"
          >
            用户名不合法
          </div>
        </div>
        <div class="child">
          性别:
          <input type="radio" name="sex" value="男" v-model="sex" />男
          <input type="radio" name="sex" value="女" v-model="sex" />女
        </div>
        <div class="child">
          年龄:
          <input type="text" placeholder="年龄" class="inp" v-model="age" />
        </div>
        <div class="child">
          电话:
          <input
            type="text"
            placeholder="联系方式"
            class="inp"
            v-model="phone"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMessage">添 加 信 息</el-button>
      </span>
    </el-dialog>

    <!-- 中间表格 获取信息 -->
    <el-table
      :data="members1"
      height="600"
      border
      style="
        width: 90%;   
        position: absolute;
        top: 75px;
        left: 70px;
        font-size: 12px;
      "
      :row-class-name="tableRowClassName"
      :default-sort="{ prop: 'sex', order: 'descending' }"
    >
      <el-table-column
        prop="username"
        label="姓名"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="180"
        sortable
      ></el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        sortable
        :formatter="parseAge"
      ></el-table-column>
      <el-table-column prop="phone" label="手机号" sortable></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
            type="primary"
            style="margin-left: 16px"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            style="background: #d9a7c7; border-color: #d9a7c7"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页符 -->
    <el-pagination  
      layout="prev, pager, next" 
      :page-size="10"
      :total="members.length" 
      @next-click="page++"
      @prev-click="page--"
      @current-change="changePage"
      >
    </el-pagination>
    <!-- 编辑信息 表格 -->
    <el-drawer
      title="修改信息"
      :visible.sync="drawer"
      :with-header="false"
      height="20%"
      :before-close="handleClose"
    >
      <i
        class="el-icon-close"
        style="
          margin-right: 10px;
          display: block;
          position: absolute;
          right: 50px;
          top: 20px;
        "
        @click="cancelUpdate"
      ></i>
      <div class="inner1" style="width: 350px; margin: 50px auto">
        <div style="margin-bottom:20px;">修改信息</div>
        <div class="child1">
          姓名:
          <input
            type="text"
            placeholder="用户名"
            class="inp1"
            v-model="UpDate.username"
          />
          <i
            class="el-icon-circle-check"
            v-show="uNameStatus == 1"
            style="color: green"
          ></i>
          <i
            class="el-icon-circle-close"
            v-show="uNameStatus == 2"
            style="color: red"
          ></i>
          <div
            style="color: red; font-size: 12px; margin-left: 40px"
            v-show="uNameStatus == 2"
          >
            用户名不合法
          </div>
        </div>
        <div class="child1">
          性别:
          <input type="radio" name="sex" value="男" v-model="UpDate.sex" />男
          <input type="radio" name="sex" value="女" v-model="UpDate.sex" />女
        </div>
        <div class="child1">
          年龄:
          <input
            type="text"
            placeholder="年龄"
            class="inp1"
            v-model="UpDate.age"
          />
        </div>
        <div class="child1">
          电话:
          <input
            type="text"
            placeholder="联系方式"
            class="inp1"
            v-model="UpDate.phone"
          />
        </div>
      </div>
      <span style="margin-left: 9px">
        <el-button @click="cancelUpdate">取 消 修 改</el-button>
        <el-button type="primary" @click="upDateMessage">修 改 信 息</el-button>
      </span>
    </el-drawer>
  </div>
</template>

<script>
import axios from 'axios'
import url from '../../config/url'
export default {
  data() {
    return {
      members: [],
      dialogVisible: false,
      // 检测 姓名 状态
      uNameStatus: 0,
      username: '',
      age: '',
      sex: '',
      phone: '',
      // 编辑信息框 状态
      drawer: false,
      UpDate: {
        username: '',
        age: '',
        sex: '',
        phone: ''
      },
      // 搜索表单动态绑定的值
      keywords: '',
      // 创建一个空数组
      membersCopy: [],
      page:1
    }
  },
  // 数据展示
  created() {
    this.$http.get(url.members).then((res) => {
      // console.log(res);
      this.members = res.data.data
    })
  },
  computed:{
    members1(){
      let tmp = JSON.parse(JSON.stringify(this.members))
      return tmp.splice((this.page - 1) * 10,10)
    }
  },
  methods: {
    changePage(val){
      this.page = val
    },
    search() {
      axios.get(url.member + 'username=' + this.keywords).then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.members = res.data.data
        } else {
          window.location.reload()
        }
      })
      // // 建立一个空数组
      // let tmp = []
      // // 判断 搜索内容 是否为空
      // if(this.keywords !== ''){
      //   this.members.forEach((item) => {
      //     // if(this.keywords === item.phone){
      //     //   tmp.push(item)
      //     // }
      //     if(item.phone.includes(this.keywords)){
      //       tmp.push(item)
      //     }
      //   })
      // }else{
      //   window.location.reload()
      // }
      // this.members = tmp;
    },
    // 添加 提交 新的信息的方法
    addMessage() {
      if (this.uNameStatus == 2) {
        alert('无法提交信息')
        return
      }
      const { username, age, sex, phone } = this
      let data = { username, age, sex, phone }
      this.dialogVisible = false
      this.$http.post(url.members, data).then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.$tip('添加成功')
          window.location.reload()
          this.members.push(data)
        } else {
          this.$tip('添加失败', 'error')
        }
      })
    },
    // 修改用户信息
    upDateMessage() {
      axios.put(url.members, this.UpDate).then((res) => {
        // console.log(res)
        if (res.data.code === 0) {
          this.$tip('修改成功')
          this.drawer = false
          // window.location.reload()
        } else {
          this.$tip('修改失败')
        }
      })
    },
    // 点击 修改用户信息 弹出框
    handleEdit(index, row) {
      console.log(index, row)
      this.drawer = true
      // 获取当前行的用户信息
      this.UpDate = row
      // 备份原来的地址
      this.membersCopy = JSON.parse(JSON.stringify(this.members))
    },
    // 点击取消修改数据
    cancelUpdate() {
      this.drawer = false
      // 取消修改后 把原来的数据 再重新赋值给改动的数组
      this.members = this.membersCopy
    },
    // 删除用户
    handleDelete(index, row) {
      axios.delete(url.members + '/' + row.phone).then((res) => {
        if (res.data.code === 0) {
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.members.splice(index, 1)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              // 删除后刷新页面
              window.location.reload()
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      })
    },
    // 行状态 添加样式
    tableRowClassName({ row, rowIndex }) {
      // console.log(rowIndex)
      if (rowIndex % 2 !== 0) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
    },
    parseAge(row, column) {
      return row.age + '岁'
    },
    // 弹出框 是否确认取消
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 校验新添加的用户名
    changeName() {
      if (/[\u4e00-\u9fa5]+/.test(this.username)) {
        this.uNameStatus = 1
      } else {
        this.uNameStatus = 2
      }
    }
  }
}
</script>

<style lang="scss">
.warning-row {
  background: #f491b4 !important;
}
.success-row {
  background: skyblue !important;
}
// 隐藏 滚动条
.el-table__body-wrapper::-webkit-scrollbar {
  display: none;
}
.inner {
  font-size: 16px;
  .child {
    margin-bottom: 20px;
    .inp {
      width: 200px;
      height: 30px;
    }
  }
}
.inner1 {
  .child1 {
    margin-bottom: 20px;
    .inp1 {
      width: 280px;
      height: 30px;
    }
  }
}
.search {
  float: right;
  margin-right: 20px;
  margin-top: 5px;
  height: 30px;
  border: 0;
  padding-left: 8px;
}
.el-pagination{
  position:absolute;
  top: 695px;
  left: 450px;
}
</style>
